<template>
	<view class="studentsList">
		<div class="navBar">
			<uni-icons type="back" size="14" color="#fff" id="icon" @tap="goBack"></uni-icons>
			<span class="title">看生长</span>
		</div>
		<ul class="classifySelectBox">
		    <li>
		     <view class="login">
		      <w-select v-model='chooseValue' defaultValue="年级" :list='list' valueName='content' keyName="id"
		       @change='change'>
		      </w-select>
		     </view>
		    </li>
		    <li>
		     <view class="login">
		      <w-select v-model='chooseValue' defaultValue="班级" :list='list' valueName='content' keyName="id"
		       @change='change'>
		      </w-select>
		     </view>
		    </li>
		   </ul>
		<view class="listBox">
			<div class="search">
				<liu-search-bar :mode="1" @confirm="confirm" @blur="blur" @input="input"
					height="48rpx"></liu-search-bar>
			</div>
			<div class="appraiseList">

		
			<div class="list">
				<swiper id="swiper">
					<swiper-item v-for="(item,index) in studentList" :key="index">
						<view class="swiper-item">
							<ul class="ulBox">
								<li v-for="(citem,i) in item" @tap="tapStudent($event,index,i)" class="liBox" :data-name="citem.name" :data-index="index" :data-img="citem.img"><img :src=citem.img alt="" :key="index"><span>{{citem.name}}</span></li>
							</ul>
						</view>
					</swiper-item>
				</swiper>
			</div>
			</div>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [{"value":0,"text": "多选"},{"value": 1,"text": "全选"},{"value": 2,"text": "反选"}],
				quanxuan:"",
				fanxuan:"",
				chooseValue: "",
				list: [{
					id: 1,
					content: '张三'
				}, {
					id: 2,
					content: '李四'
				}, {
					id: 3,
					content: '王五'
				}],
			chosenList:[],
			cb:false,
			iconType: ['success'],
			moralsList:[
				{img:"../../static/image/2德（1）.png",bool:false,style:"img",Text:"德",children:[
					{scenario:"德1"},
					{scenario:"德2"},
					{scenario:"德3"},
					{scenario:"德4"},
					{scenario:"德5"},
					{scenario:"德6"},
					{scenario:"德7"},
					{scenario:"德8"},
					{scenario:"德9"},
				]},
				{img:"../../static/image/2智（1）.png",bool:false,style:"img",Text:"智",children:[
					{scenario:"智1"},
					{scenario:"智2"},
					{scenario:"智3"},
					{scenario:"智4"},
					{scenario:"智5"},
					{scenario:"智6"},
					{scenario:"智7"},
					{scenario:"智8"},
					{scenario:"智9"},
				]},
				{img:"../../static/image/2体（1）.png",bool:false,style:"img",Text:"体",children:[
					{scenario:"体1"},
					{scenario:"体2"},
					{scenario:"体3"},
					{scenario:"体4"},
					{scenario:"体5"},
					{scenario:"体6"},
					{scenario:"体7"},
					{scenario:"体8"},
					{scenario:"体9"},
				]},
				{img:"../../static/image/2美（1）.png",bool:false,style:"img",Text:"美",children:[
					{scenario:"美1"},
					{scenario:"美2"},
					{scenario:"美3"},
					{scenario:"美4"},
					{scenario:"美5"},
					{scenario:"美6"},
					{scenario:"美7"},
					{scenario:"美8"},
					{scenario:"美9"},
				]},
				{img:"../../static/image/2劳（1）.png",bool:false,style:"img",Text:"劳",children:[
					{scenario:"劳1"},
					{scenario:"劳2"},
					{scenario:"劳3"},
					{scenario:"劳4"},
					{scenario:"劳5"},
					{scenario:"劳6"},
					{scenario:"劳7"},
					{scenario:"劳8"},
					{scenario:"劳9"},
				]}
			],
			moralsNewList:[
				{img:"../../static/image/22分组 7.png",bool:false},
				{img:"../../static/image/22分组 8.png",bool:false},
				{img:"../../static/image/22分组 9.png",bool:false},
				{img:"../../static/image/22分组 10.png",bool:false},
				{img:"../../static/image/22分组 11.png",bool:false}
			],
			selectForm:[],
			studentList:[
				{name:"赵",img:"../../static/image/hd.png"},
				{name:"钱",img:"../../static/image/hd.png"},
				{name:"孙",img:"../../static/image/hd.png"},
				{name:"李",img:"../../static/image/hd.png"},
				{name:"周",img:"../../static/image/hd.png"},
				{name:"吴",img:"../../static/image/hd.png"},
				{name:"郑",img:"../../static/image/hd.png"},
				{name:"王",img:"../../static/image/hd.png"},
				{name:"冯",img:"../../static/image/hd.png"},
				{name:"陈",img:"../../static/image/hd.png"},
				{name:"褚",img:"../../static/image/hd.png"},
				{name:"卫",img:"../../static/image/hd.png"},
				{name:"蒋",img:"../../static/image/hd.png"},
				{name:"沈",img:"../../static/image/hd.png"},
				{name:"韩",img:"../../static/image/hd.png"},
				{name:"杨",img:"../../static/image/hd.png"},
				{name:"朱",img:"../../static/image/hd.png"},
				{name:"秦",img:"../../static/image/hd.png"},
				{name:"尤",img:"../../static/image/hd.png"},
				{name:"许",img:"../../static/image/hd.png"},
				{name:"何",img:"../../static/image/hd.png"},
				{name:"吕",img:"../../static/image/hd.png"},
				{name:"施",img:"../../static/image/hd.png"},
				{name:"张",img:"../../static/image/hd.png"},
				{name:"孔",img:"../../static/image/hd.png"},
				{name:"曹",img:"../../static/image/hd.png"},
				{name:"严",img:"../../static/image/hd.png"},
				{name:"华",img:"../../static/image/hd.png"},
				{name:"金",img:"../../static/image/hd.png"},
				{name:"魏",img:"../../static/image/hd.png"},
				{name:"陶",img:"../../static/image/hd.png"},
				{name:"姜",img:"../../static/image/hd.png"},
			],
			oldNum:0,
			newNum:"",
			theme:"",
			themeTitle:"",
			titleScenario:"",
			oldimg:"",
			children:""
			};
		},
		created() {
			this.studentList=this.chunkArr(this.studentList,16)
			console.log(this.studentList);
			for(let i=0;i<this.studentList.length;i++){
				for(let c=0;c<this.studentList[i].length;c++){
					let style ="liBox"
					this.studentList[i][c].style=style
				}
			}
			console.log(this.studentList);
		},
		methods: {
			confirm(e) {
				console.log('confirm搜索内容：' + e)
			},
			//blur事件
			blur(e) {
				console.log('blur搜索内容：' + e)
			},
			tapStudent(){
				
			uni.navigateTo({
				url: '/pages/tree/index'
			});
			},
			goBack(){
				uni.navigateBack({
				    delta: 1
				})
			},
			//inut事件
			input(e) {
				console.log('input搜索内容：' + e)
			},

			
			chunkArr (arr, size) {
			  if (!arr.length || !size || size < 1) return []
			  let [start, end, result] = [null, null, []]
			  for (let i = 0; i < Math.ceil(arr.length / size); i++) {
			    start = i * size
			    end = start + size
			    result.push(arr.slice(start, end))
			  }
			  return result
			},
		
			
		}
	}
</script>

<style>
	
	.studentsList {
		background: linear-gradient(180deg, rgba(165, 229, 185, 1) 0%, rgba(111, 222, 210, 1) 100%);
		height: 1576rpx;
	}

	.navBar {
		height: 72rpx;
		background: #49C595;
		padding-top: 84rpx;
		position: relative;
	}
	.classifySelectBox {
		width: 70%;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		padding: 0px 32rpx 0px 32rpx;
		justify-content: space-between;
	}

	.classifySelectBox>li {
		width: 178rpx;
		background: #B3FFE0;
		border-radius: 40rpx;
		text-align: center;
	}
	.navBar>span {
		margin: auto;
	}

	#icon {
		margin-left: 69rpx;
		font-size: 18px;
	}

	.title {
		color: #FFF;
		position: absolute;
		left: 50%;
		transform: translate(-50%)
	}

	.listBox {
		padding-top: 30rpx;
		height:auto;
		width: 684rpx;
		margin: 34rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		
	}
	.moralsBox{
		display: inline-block;
		margin-right: 23rpx;
		
	}
	.moralsBox>ul{
		height: 960rpx;
		margin-top: 26rpx;
		margin-left: 14rpx;
		width: 156rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.moralsBox>ul>li{
		width: 156rpx;
		height: 156rpx;
		border-radius: 50% 50% 50% 50%;
		position: relative;
	}
	.img{
		width: 128rpx;
		height: 128rpx;
		position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%);  
	}
	.imgTap{
		width: 128rpx;
		height: 128rpx;
		position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%);  
		border: 12rpx solid #C8F6F6;
		border-radius: 80rpx;
	}
	.list{
		margin: auto;
		margin-top: 76rpx;
		display: inline-block;
		width: 90%;
		height: 760rpx;
	}
	#swiper{
		height: 740rpx;
	}
	.ulBox{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.liBox{
		text-align: center;
		width: 25%;
		height: 171rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	.tapliBox{
		width: 124rpx;
		height: 171rpx;
		display: flex;
		flex-wrap: wrap;
		margin-right: 24rpx;
		margin-bottom: 10rpx;
		background-color: rgba(0,0,0,0.1);
		color: #2979FF;
	}
	.ulBoxli:last-child {
	  margin-right: auto;
	}
	
	.ulBox>li>span{
		font-size: 32rpx;
		height: 35rpx;
		width: 100%;
		text-align: center;
	}
	.ulBox>li>img{
		width: 116rpx;
		height: 116rpx;
		border-radius: 50% 50% 50% 50%;
		margin: auto;
	}
	.appraiseList{
		display: flex;
	}
	.checkboxBox{
		width: 70%;
		height: 23rpx;
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		flex-wrap: wrap;
		margin: auto;
	}
.button{
	width: 70%;
	margin: auto;
	margin-top: 80rpx;
	height: 65rpx;
	background: rgba(91, 202, 155, 1);
	color: #fff;
	font: 32rpx;
	text-align: center;
	line-height: 65rpx;
	border-radius: 40rpx;
}
.scenarioListBox>li{
	height: 100rpx;line-height: 100rpx;border-bottom: 1px solid #F5F5F5;width: 100%;text-align: center;background-color: #fff;
}
</style>
